<template>
  <div>
    <div class="center">
      <img src="../../public/guanyu1.jpg" alt="" />
      <div><h3>专为海外华人、留学生代购淘宝、京东等商品的平台</h3></div>
    </div>
    <div class="center1">
      <div class="GY">
        <h4>关于KoKo</h4>
        <p>欢迎您来到最受欢迎的海外华人在线购物平台KoKo,</p>
        <p>体验最新</p>
      </div>
      <div style="height: 80px"></div>
      <div class="team">
        <div class="woshou1">
          <img src="../../public/tuandui1.png" alt="" />
          <div><h6>KoKo的团队</h6></div>
        </div>

        <div class="wenzi">
          <p class="p1">
            “上海仕欢科技有限公司”旗下的“KoKo”创建于2005年3月。KoKo前身为KoKo购物论坛,是在原有的服务海外留学生代购中国商品业务的基础上成立发展而来的。
          </p>
          <p>
            公司拥有多位具备商品代购领域资深运营经验的电子商务专家；拥有先进的全球物流网络和开拓进取的精英管理团队。公司构建了一个自由广阔、安全可靠的网络平台，为广大海外消费者畅通无阻地实现中国大陆网络购物提供全方位的解决方案。
          </p>
        </div>
        <div class="wenzi2">
          <p class="p2">
            KoKo正在帮助更多的海外消费者实现他们多年的梦想————“足不出户,买遍中国”!
          </p>
          <p>
            KoKo致力于建设一个为海外用户提供代购中国商品服务的平,让身在海外的您不用回国，便能自由挑选和购买到正宗优质的中国商品,同时,KoKo与众多中国大陆著名电商平台达成合作,您可以通过“KoKo”海外代购平台进入中国,第一时间了解中国大陆时尚信息,拥有自己梦寐以求的商品,真正实现无国界生活
          </p>
        </div>
        <div>
          <div class="woshou2">
            <img src="../../public/tuandui2.png" alt="" />
            <div><h6>KoKo的团队</h6></div>
          </div>
        </div>
      </div>
    </div>

    <div class="GY">
      <h4>KoKo的服务</h4>
      <p>
        KoKo依托自身广泛的信息平台，和世界范围内的物流网络，向海外消费者提供以互联网为基础、
      </p>
      <p>以便利消费者为宗旨的跨境代购服务。通过KoKo代购，您可以享受到：</p>
    </div>

    <div class="center3">
      <div class="icon">
        <ul>
          <li>
            <img src="../../public/icon-1.png" alt="" />
            <div>任意商品</div>
            <p style="font-size: 17px">无限选择购买网上商品</p>
          </li>
          <li>
            <img src="../../public/icon-2.png" alt="" />
            <div>无需兑换外汇</div>
            <p style="font-size: 17px; padding-bottom: 10px">
              无需中国大陆银行卡
            </p>
            <p>用外币即可购买中国商品</p>
          </li>
          <li>
            <img src="../../public/icon-3.png" alt="" />
            <div>省时省事</div>
            <p style="font-size: 17px; padding-bottom: 10px">最低的商品价格</p>
            <p>便捷多元的支付方式</p>
          </li>
          <li>
            <img src="../../public/icon-4.png" alt="" />
            <div>快捷安全</div>
            <p style="font-size: 17px; padding-bottom: 10px">
              快捷安全地收到您委托
            </p>
            <p>代购的商品</p>
          </li>
          <li>
            <img src="../../public/icon-5.png" alt="" />
            <div>方便简洁</div>

            <p>享受令人满意的客户服务</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="center4">
      <h4>联系我们</h4>
    </div>

    <div class="center5">
      <div class="tupian">
        <!-- 准备一个盛放地图的容器div -->
        <div id="container"></div>
        <div class="dibu">
          <p>电话： 0086-21-52719881</p>
          <p>邮箱： market@KoKo.net</p>
          <p>地址： 上海市虹桥正荣中心5号楼513室</p>
          <div
            style="margin: 0 0 24px; width: 282px; border: 1px dashed #333333"
          ></div>
          <p>工作时间：（北京时间）09:00~17:30</p>
          <p>欢迎来电咨询！</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      radio: 3,
      map: null,
      marker: null,
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "c996312ab1b25f4f5481de2c87635767", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3d", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            center: [114.042363, 22.669987], //初始化地图中心点位置
          });
          this.marker = new AMap.Marker({
            position: new AMap.LngLat(114.042363, 22.669987), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: "深圳",
          });

          // 将创建的点标记添加到已有的地图实例：
          this.map.add(this.marker);
        })
        .catch((e) => {
          console.log(e);
        });
    },
     mounted () {
      // 点击后到页面顶部
       window.scrollTo(0,0)
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
    // 点击后到页面顶部
       window.scrollTo(0,0)
  },
};
</script>


<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0 auto;
  width: 1200px;
  height: 800px;
}
.center5 .dibu p {
  //display: block;
  font-size: 16px;
  padding: 0 0 24px;
  color: #333333;
}
.center5 .dibu {
  position: absolute;
  width: 282px;
  height: 280px;
  background-color: white;
  left: 1360px;
  top: 200px;
  padding: 60px 30px 30px;
}

.tupian {
  width: 1965px;
  margin: 0 auto;
  position: relative;
}
.center5 {
  //  width: 100%;
  // height: 564px;
  background-color: #f5f5f5;
}
.center4 h4 {
  font-size: 40px;
  padding: 0 0 51px;
  text-align: center;
  font-weight: 600;
}
.centr3 .icon > ul > li p {
  font-size: 17px;
  line-height: 20px;
}
.center3 .icon > ul > li > img {
  // width: 224px;
  height: 120px;
  padding: 58px 0 0;
}
.center3 .icon > ul > li div {
  font-size: 24px;
  font-weight: 600;
  margin: 13px 0 20px;
  padding: 0 0 20xp 0;
}
.center3 .icon ul > li {
  //border: 3px solid black;
  box-shadow: 0 2px 10px 0 hsl(0deg 0% 80% / 40%);
  width: 224px;
  height: 400px;
  margin: 0 24px 0 0;
  text-align: center;
  overflow: hidden;
}
ul {
  list-style: none;
  display: flex;
  overflow: hidden;
}

.center3 {
  width: 1200px;
  margin: 0 auto;
}
.wenzi2 {
  width: 600px;
  height: 400px;
  background-color: #ff6e6e;
  color: white;
  line-height: 30px;

  text-indent: 2em;
  font-size: 16px;
}
.wenzi2 .p2 {
  padding: 80px 0 20px;
}
.wenzi {
  width: 600px;
  height: 400px;
  background-color: #ff6e6e;
  color: white;
  line-height: 30px;

  text-indent: 2em;
  font-size: 16px;
}
.woshou1 {
  position: relative;
}
.woshou1 h6 {
  display: block;
  width: 600px;
  height: 140px;
  background-color: #0002;
  position: absolute;
  text-align: center;
  line-height: 140px;
  top: 125px;
  // left: 220px;
  // padding: 40px 30px;
  font-size: 30px;
  color: white;
}

.woshou2 {
  position: relative;
}

.woshou2 h6 {
  display: block;
  width: 600px;
  height: 140px;
  background-color: #0002;
  position: absolute;
  text-align: center;
  line-height: 62px;
  top: 130px;
  //left: 12px;
  // padding: 40px 30px;
  font-size: 30px;
  color: white;
}

.wenzi .p1 {
  padding: 80px 0 20px;
}
.team {
  display: flex;
  flex-flow: wrap;

  font-size: 0;
  //line-height: 0;
}
.center h3 {
  display: block;
  width: 1080px;
  height: 60px;
  background-color: #0002;
  position: absolute;
  text-align: center;
  line-height: 62px;
  top: 250px;
  left: 420px;
  padding: 40px 30px;
  font-size: 30px;
  color: white;
}

.center1 {
  width: 1200px;
  margin: 0 auto;
}
.center {
  width: 1860px;
  margin: 0 auto;
  position: relative;
}
.center img {
  width: 1820px;
  height: 650px;
  margin: 0 auto;
}
.GY {
  padding-top: 69px;
}
.GY h4 {
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  padding: 0 0 51px;
}
.GY p {
  display: block;
  text-align: center;
  font-size: 18px;
  padding: 8px 0 5px;
  color: #333333;
}
</style>